<template>
  <n-data-table size="small" :columns="columns" :data="data" :pagination="pagination" />
</template>

<script setup>
import { h, defineComponent, reactive, ref } from "vue";
import { NTag, NButton, useMessage } from "naive-ui";

let props = defineProps(["dataColumns"]);

let actionCloumn = {
  title: "Action",
  key: "actions",
  // render(row) {
  //   return h(
  //     NButton,
  //     {
  //       size: "small",
  //       onClick: () => sendMail(row),
  //     },
  //     { default: () => "Send Email" }
  //   );
  // },
  // render(row) {
  //   return [
  //     h(
  //       NButton,
  //       {
  //         size: "small",
  //         style: {
  //           marginRight: "10px",
  //           marginBottom: "10px",
  //         },
  //         onClick: () => sendMail(row),
  //       },
  //       { default: () => "Email" }
  //     ),
  //     h(
  //       NButton,
  //       {
  //         size: "small",
  //         type: "error",
  //         onClick: () => sendMail(row),
  //       },
  //       { default: () => "Email" }
  //     ),
  //   ];
  // },
};

// let createColumns = ({ sendMail }, cloumn, actionCloumn) => {
//   cloumn.push(actionCloumn);
//   return cloumn;
// };

let createColumns = ({ sendMail }, columns, actionColumn) => {
  // 修改为直接使用传入的sendMail函数，而不是重新定义
  actionColumn.render = (row) => {
    return [
      h(
        NButton,
        {
          size: "small",
          style: {
            marginRight: "10px",
            marginBottom: "10px",
          },
          onClick: () => sendMail(row), // 直接调用传入的sendMail
        },
        { default: () => "Email" }
      ),
      h(
        NButton,
        {
          size: "small",
          type: "error",
          onClick: () => sendMail(row), // 同样直接调用传入的sendMail
        },
        { default: () => "Email" }
      ),
    ];
  };

  // 将actionColumn加入到columns数组
  columns.push(actionColumn);
  return columns;
};

const createData = () => [
  {
    key: 0,
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
    tags: ["nice", "developer"],
  },
  {
    key: 1,
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
    tags: ["wow"],
  },
  {
    key: 2,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"],
  }
];

let message = useMessage();

let data = ref(createData());
let columns = ref(
  createColumns(
    {
      sendMail(rowData) {
        message.info("send mail to " + rowData.name);
      },
    },
    props.dataColumns,
    actionCloumn
  )
);

let pagination = reactive({
  pageSize: 10,
});
</script>

<style scoped></style>
